<template>
  <div class="div">
      <ul class="list">
          <li v-for="(v,i) in arr" :key="i">
              <div class="limg"><img :src="v.img"></div>
              <p>{{v.name}}</p>
          </li>
      </ul>
  </div>
</template>

<script>
export default {
    data(){
        return {
            arr:[
                {name:"找房卡",img:"img/d1.jpg"},
                {name:"订阅",img:"img/d2.jpg"},
                {name:"经纪人",img:"img/d3.jpg"},
                {name:"租约",img:"img/d4.jpg"},
                {name:"我的点评",img:"img/d5.jpg"},
                {name:"我的榜单",img:"img/d6.jpg"},
                {name:"现金奖励",img:"img/d7.jpg"},
                {name:"钱包",img:"img/d8.jpg"},
                {name:"家庭选房",img:"img/d9.jpg"},
                {name:"贷款预估",img:"img/d10.jpg"},
                {name:"我的问答",img:"img/d5.jpg"},
                {name:"我的户型",img:"img/d8.jpg"}
            ]
        }
    }
}
</script>

<style scoped>
*{
    margin: 0;
    padding: 0;
}
.div{
    width: 100%;
    height: 1.36rem;
    margin: auto;
    overflow-x: auto;
    /* background: orchid; */
}
.div::-webkit-scrollbar{
  display: none;
}
.list{
    width: 4.7rem;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
} 
.list li{
    width: .77rem;
    height: 50%;
    /* border: 1px solid red; */
}
.list li .limg{
    width: .26rem;
    height: .26rem;
    margin: .02rem auto .15rem;
}
.list li .limg img{
    width: 100%;
    height: 100%;
    
}
.list li p{
    text-align: center;
}
</style>